<template>
  <div>
      <el-form ref="formObj" :rules="rules" :model="dataform" label-width="auto" style="max-width: 600px;">
        <el-form-item label="分类名称" prop="name">
          <el-input maxlength="255" v-model="dataform.name" placeholder="请输入分类名称(必填)"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="dataform.type">
            <el-radio :value="0">叶节点</el-radio>
            <el-radio :value="1">非叶节点</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图标">
           <el-upload
              v-model:file-list="fileList"
              :auto-upload="false"
              action="#"
              :limit="1"
              list-type="picture-card"
              :on-change="uploadFile"
              :on-remove="removeFile">
              <el-icon><PictureFilled /></el-icon>
          </el-upload>
        </el-form-item>
        <el-button style="margin-left: 70px;" @click="save">提交</el-button>
        <el-button @click="empty">清空</el-button>
      </el-form>
  </div>
</template>
<script setup>
import { _axios,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import path from "./path"
import { PictureFilled } from '@element-plus/icons-vue'
// 子组件和组件共享数据和函数
const emits = defineEmits(['update:show','getTableData'])
// 父组件向子组件传递数据
const props = defineProps(['id','level','parentId'])
const fileList = reactive([])
// 用来保存表单数据
const dataform = reactive({
  id: null,
  name: '',
  parentId: null,
  level: null,
  type: 1,
  icon: null,
  file: fileList[0]
})
function check(rule,value,callback){
  get(path.check,{value,filedName: rule.filedName,id:props.id},content => {
      if(content){
        callback(new Error())
      } else {
        callback()
      }
  })
}

// 校验相关
const rules = reactive({
  name:[
    // 校验是否为空
    { required: true, message: '请输入名称',trigger: 'blur'},
    { validator: check ,message: '该分类已经存在' ,trigger: 'blur',filedName: 'name'}
  ],
  type:[
    { required: true, message: '请输入类型',trigger: 'blur'},
    { validator:
      (rule,value,callback) => {
        if(value == 0) {
          get(path.haveChild,{id:props.id},content => {
        if(content){
          callback(new Error())
        } else {
          callback()
        }
      })
        } else {
          callback()
        }
    }
      ,message: '该目录存在下级不能被修改为叶节点！' ,trigger: 'blur'}
  ],
})
// 表单对象
const formObj = ref()
console.log(props.id)
if(props.id){
  // 说明点击的是修改，而不是添加
  dataform.id = props.id
  getById()
} else {
  // 这里是添加，需要给父节点和等级
  dataform.level = props.level + 1
  dataform.parentId = props.parentId
}
// 重置表单
function empty(){
  dataform.name = ''
  dataform.description = ''
  dataform.frontUrl = ''
  dataform.backUrl = ''
}
function getById(){
  console.log(props.id)
  get(path.get,{id:props.id},function(content){
     for(let key in dataform){
      // 将后端没有的属性的数据排除掉
      if(Object.prototype.hasOwnProperty.call(content,key)){
        dataform[key] = content[key]
      }
    }
    if(content.icon !== null){
      fileList.push({
        url: path.imageBase + content.icon
      })
    }
  })
}

function uploadFile(file) {
  dataform.file = file.raw
}
function removeFile(){
  dataform.file = null
}
// 表单提交
function save(){
  post(props.id ? path.update : path.add,dataform,content => {
        emits('update:show', false)
        emits('getTableData')
      },formObj)
}
</script>
<style scoped lang='scss'>
</style>